<template>
  <div class="app">
    <sect/>
    <div class="head">
      <div class="fun">
        <img
          class="gd"
          src="../../assets/more.png"
          @click="showPopup"
          width="20px"
          height="20"
          alt=""
        />

        <img src="../../assets/fenxiang.png" width="20px" height="20" alt="" />
      </div>
      <div class="headpor">
        <div class="headpor_por">
          <img :src="picer" alt="" />
        </div>
        <p class="headpor_name">
          <br />
          <span>{{ name }}</span>
          <span
            >小红书号 : {{ mark }} &nbsp;<img
              src=""
              width="12"
              height="12"
              alt=""
          /></span>
        </p>
      </div>

      <div class="head_resume">
        <p>{{ brief }}</p>
        <span class="aaaa">
          <div>{{ aaaa.age }}岁</div>
          <div>{{ aaaa.sex }}</div>
        </span>
      </div>
      <div class="social">
        <div class="social_left">
          <p @click="atten">{{ attention }} <br /><span>关注</span></p>
          <p>{{ myvermicelli }} <br /><span>粉丝</span></p>
          <p @click="showPopup1">{{ a }} <br /><span>获赞与收藏</span></p>
        </div>
        <!-- 弹出获赞与收藏 -->
        <van-popup v-model="show1" class="box">
          <h3>获赞与收藏</h3>
          <div class="box1">
            <span>
              <span>
                <div class="cire1">
                  <van-icon name="orders-o" color="white" />
                </div>

                当前发布笔记数 :{{ a }} </span
              ><br />
            </span>

            <span>
              <span>
                <div class="cire2"><van-icon name="like" color="white" /></div>
                当前获得点赞数 :{{ b }} </span
              ><br />
            </span>

            <span>
              <span>
                <div class="cire3">
                  <van-icon name="star" color="white" />
                </div>
                当前获得收藏数 :{{ c }} </span
              ><br />
            </span>
            <button
              @click="showPopup2"
              style="
                width: 200px;
                background: red;
                color: white;
                border-radius: 30px;
                padding: 8px 10px;
                border: 0;
              "
            >
              我知道了
            </button>
          </div>
        </van-popup>
        <div class="social_rigth">
          <div class="social_rigth_1">
            <div @click="data1">编辑资料</div>
            <div>
              <img
                src="../../assets/set2.png"
                width="20px"
                height="20px"
                alt=""
                @click="setup"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="groupChat">
        <img src="../../assets/multiuser.png" width="20px" alt="" />&nbsp;
        <span>群聊</span>
      </div>
    </div>
    <div class="foot">
      <div class="foot_select">
        <van-tabs v-model="activeName">
          <van-tab title="笔记" name="笔记"
            ><div class="foot_bottm">
              <p>公开 - {{ open }}</p>
              <p>
                <img
                  src="../../assets/privacy.png"
                  width="20px"
                  height="20px"
                  alt=""
                />
                &nbsp;&nbsp;<span>私密 - 0</span>
              </p>
            </div>
            <!-- <div class="note">
              <div>
                <div class="aaa">
                  <div class="subject">
                    <div class="subject_left" id="subject_left1">
                      <div class="subject_left_1">
                        <img src="../../assets/01.webp" />
                        <p class="nr">{{ nr1 }}</p>
                        <div class="sub_1">
                          <p class="sub_1_1">
                            <img
                              src="../../assets/01.webp"
                              style="
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                              "
                              alt=""
                            />
                            &nbsp;&nbsp;
                            <span>{{ usme }}</span>
                          </p>
                          <p class="sub_1_1">
                            <van-icon name="like-o" style="font-size: 18px" />
                            <span>123213</span>
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="subject_right">
                      <div class="subject_right_1">
                        <img src="../../assets/01.webp" />
                        <p class="nr">{{ nr }}</p>
                        <div class="sub_1">
                          <p class="sub_1_1">
                            <img
                              src="../../assets/01.webp"
                              style="
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                              "
                              alt=""
                            />
                            &nbsp;
                            <span>{{ usme }}</span>
                          </p>
                          <p class="sub_1_1">
                            <van-icon name="like-o" style="font-size: 18px" />
                            <span>123213</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div> -->
          </van-tab>
          <van-tab title="收藏" name="收藏">
            <div class="foot_bottm">
              <p>笔记 - {{ opene }}</p>
              <p>
                <img
                  src="../../assets/privacy.png"
                  width="20px"
                  height="20px"
                  alt=""
                />
                &nbsp;&nbsp;<span>专辑 - 0</span>
              </p>
            </div>
            <div class="note">
              <div>
                <div class="aaa">
                  <div class="subject">
                    <div class="subject_left" id="subject_left1">
                      <div class="subject_left_1">
                        <img src="../../assets/01.webp" />
                        <p class="nr">{{ nr1 }}</p>
                        <div class="sub_1">
                          <p class="sub_1_1">
                            <img
                              src="../../assets/01.webp"
                              style="
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                              "
                              alt=""
                            />
                            &nbsp;&nbsp;
                            <span>{{ usme }}</span>
                          </p>
                          <p class="sub_1_1">
                            <van-icon name="like-o" style="font-size: 18px" />
                            <span>123213</span>
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="subject_right">
                      <div class="subject_right_1">
                        <img src="../../assets/01.webp" />
                        <p class="nr">{{ nr }}</p>
                        <div class="sub_1">
                          <p class="sub_1_1">
                            <img
                              src="../../assets/01.webp"
                              style="
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                              "
                              alt=""
                            />
                            &nbsp;
                            <span>{{ usme }}</span>
                          </p>
                          <p class="sub_1_1">
                            <van-icon name="like-o" style="font-size: 18px" />
                            <span>123213</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="点赞" name="点赞">
            <div class="note">
              <div>
                <div class="aaa">
                  <div class="subjec">
                    <div class="subject_left" id="subject_left1">
                      <div class="subject_left_1">
                        <img src="../../assets/01.webp" />
                        <p class="nr">{{ nr }}</p>
                        <div class="sub_1">
                          <p class="sub_1_1">
                            <img
                              src="../../assets/01.webp"
                              style="
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                              "
                              alt=""
                            />
                            &nbsp;&nbsp;
                            <span>{{ usme }}</span>
                          </p>
                          <p class="sub_1_1">
                            <van-icon
                              name="like"
                              color="red"
                              style="font-size: 18px"
                            />
                            <span>123213</span>
                          </p>
                        </div>
                      </div>
                    </div>

                    <div class="subject_right">
                      <div class="subject_right_1">
                        <img src="../../assets/01.webp" />
                        <p class="nr">{{ nr1 }}</p>
                        <div class="sub_1">
                          <p class="sub_1_1">
                            <img
                              src="../../assets/01.webp"
                              style="
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                              "
                              alt=""
                            />
                            &nbsp;
                            <span>{{ usme }}</span>
                          </p>
                          <p class="sub_1_1">
                            <van-icon
                              name="like"
                              color="red"
                              style="font-size: 18px"
                            />
                            <span>123213</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <van-popup v-model="show" position="left" :style="{ height: '100%' }">
      <!-- 左侧更多侧边栏 -->
      <div class="redBook">
        <a class="friend" href="">
          <img src="../../assets/Discover a friend.png" alt="" />发现好友
        </a>
        <a href="">
          <img src="../../assets/addfriends.png" alt="" />创作中心
        </a>
        <a href=""> <img src="../../assets/gift.png" alt="" />我的草稿 </a>
        <a href=""> <img src="../../assets/surface.png" alt="" />浏览记录 </a>
        <a href=""> <img src="../../assets/wallet.png" alt="" />钱包 </a>
        <a href=""> <img src="../../assets/wifi.png" alt="" />免流量 </a>
        <a class="goodThing" href="">
          <img src="../../assets/Goodexperience.png" alt="" />好物体验
        </a>
        <a href="#" @click="order"
          ><img src="../../assets/order.png" alt="" />订单
        </a>
        <a href="#" @click="shopoing"
          ><img src="../../assets/shopping.png" alt="" />购物车
        </a>
        <a href="#"><img src="../../assets/stuck.png" alt="" />卡卷 </a>
        <a href="#"><img src="../../assets/wish.png" alt="" />心愿单 </a>
        <a class="member" href="">
          <img src="../../assets/share.png" alt="" />小红卡会员
        </a>
        <a href=""> <img src="../../assets/botany.png" alt="" />社区公约 </a>

        <div class="redBook_one">
          <p @click="setup">
            <img src="../../assets/set.png" alt="" />
            <span>设置</span>
          </p>
          <p><img src="../../assets/service.png" alt="" />帮助与客服</p>
          <p><img src="../../assets/sweep.png" alt="" />扫一扫</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>
  
  <script>
import sect from "../../components/Sectorization.vue";

import { mint1, mint2, mint3, mint4, mint5, mint6 } from "../../api/mint";

export default {
  components: {
    sect,
    // [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      name: "清绕.",
      mark: "333333",
      brief: "点击这里，填写简介",
      // age: "20",
      attention: "20",
      open: "0",
      show: false,
      show1: false,
      picer: " ",
      aaaa: [],
      myvermicelli: "",
      nr: "风景图",
      nr1: "晚霞",
      usme: "千万人",
      active: 1,
      cc: 1,
      activeName: 0,
      opene: "2",
      a: "123",
      b: "432",
      c: "",
      d:""
    };
  },
  methods: {
    ccc() {
      let data = JSON.parse(localStorage.getItem("userid"));
      this.d =  data + "";
      mint5({
        uid: this.d,
      })
        .then((res) => {
          console.log(res);
        })
        .catch((rest) => {
          console.log(1231123);
        });
    },
    setup() {
      this.$router.push("/Setup");
    },
    showPopup() {
      this.show = true;
    },
    data1() {
      this.$router.push("/Data");
    },
    showPopup() {
      console.log(123);
      this.show = true;
    },
    showPopup1() {
      console.log(123);
      this.show1 = true;
    },
    showPopup2() {
      console.log(123);
      this.show1 = false;
    },
    order() {
      this.$router.push("/Order");
    },
    shopoing() {
      this.$router.push("/Shopping_trolley");
    },
    ye() {
      console.log(123);
      let data = JSON.parse(localStorage.getItem("userid"));
      this.d =  data + "";
      mint1({
        uid: this.d,
      })
        .then((res) => {
          // console.log(res);
          this.picer = res.result.picture;
          this.name = res.result.name;
          this.mark = res.result.redbooknum;
          this.age = res.result.age;
          this.aaaa = res.result;
          log;
        })
        .catch((rest) => {
          console.log(rest);
        });
    },
    ye2() {
      let data = JSON.parse(localStorage.getItem("userid"));
      this.d =  data + "";
      mint2({
        uid: this.d,
      }).then((res) => {
        // console.log(res);
        this.attention = res.result;
      });
    },

    ye3() {
      let data = JSON.parse(localStorage.getItem("userid"));
      this.dc =  data + "";
      mint3({
        uid: this.d,
      }).then((res) => {
        console.log(res);
        // this.attention = res.result;
      });
    },

    ye4() {
      let data = JSON.parse(localStorage.getItem("userid"));
      this.d =  data + "";
      mint4({
        uid: this.d,
      }).then((res) => {
        // console.log(res);
        this.myvermicelli = res.result;
      });
    },
    ye5() {
      let data = JSON.parse(localStorage.getItem("userid"));
      this.d =  data + "";
      mint6({
        uid: this.d,
      }).then((res) => {
        console.log(res);
        this.a = res.result;
        this.b = res.result;
        this.c = res.result;
      });
    },
    atten() {
      this.$router.push("/Atten");
    },
  },

  mounted() {
    this.ye();
    this.ye2();
    this.ye3();
    this.ye4();
    this.ccc();
    this.ye5();
  },
};
</script>
  
  <style scoped>
.cire1 {
  width: 25px;
  height: 25px;
  line-height: 25px;
  background: #0008ff;
  border-radius: 50%;
  display: inline-block;
  margin-right: 15px;
}
.cire2 {
  width: 25px;
  height: 25px;
  line-height: 25px;
  background: #ff0000;
  border-radius: 50%;
  display: inline-block;
  margin-right: 15px;
}
.cire3 {
  width: 25px;
  height: 25px;
  line-height: 25px;
  background: #eadb00;
  border-radius: 50%;
  display: inline-block;
  margin-right: 15px;
}
.nr {
  box-sizing: border-box;
  padding: 2px;
  text-align: left;
  margin: 3px;
  margin-left: 10px;
}
.app {
  width: 100vw;
}
.box {
  width: 250px;
  height: 300px;
  text-align: center;
  color: darkgray;
}
.box h3 {
  color: #000;
  text-align: center;
}
.box1 {
  width: 100%;
  height: 170px;
  /* background: pink; */
  border-top: 1px solid rgb(201, 201, 201);
  padding-top: 20px;
}
.head_resume div {
  display: inline-block;
  margin-right: 3px;
}
.box1 span {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}
.head {
  box-sizing: border-box;
  width: 406px;
  padding-bottom: 15px;
  background: #000;
  background-image: url(../../assets/01.webp);
  background-size: cover;
}
.fun {
  height: 60px;
  display: flex;
  padding: 25px 15px 0px 15px;
  box-sizing: border-box;
  justify-content: space-between;
}
/* 头像 */
.headpor {
  padding: 10px 15px;
  display: flex;
}
.headpor_por img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
}

.headpor_name {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-left: 15px;
  color: white;
}
.headpor_name span:nth-child(2) {
  font-weight: 800;
  margin-bottom: 10px;
}
.headpor_name span:nth-child(3) {
  font-size: 8px;
  margin-bottom: 10px;
}
.head_resume {
  padding: 0 15px;
  font-size: 14px;

  color: white;
}
.aaaa {
  width: 100vw;
  display: flex;
}
.head_resume div {
  margin-top: 8px;
  width: 50px;
  height: 22px;
  line-height: 22px;
  font-size: 10px;
  text-align: center;
  background-color: rgb(163, 163, 163);
  border-radius: 20px;
  color: white;
}
.social {
  margin-left: 15px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.social_left {
  display: flex;
}

.social_left p {
  margin-right: 20px;
  text-align: center;
  color: white;
  font-size: 12px;
}
.social_left span {
  font-size: 10px;
}
.social_rigth_1 {
  display: flex;
}
.social_rigth_1 div {
  height: 20px;
  border: 1px solid white;
  padding: 6px 13px;
  border-radius: 30px;
  background-color: rgb(163, 163, 163, 0.5);
  color: white;
  margin-right: 15px;
  font-size: 12px;
}
.social_rigth_1 div:nth-child(1) {
  margin-right: 10px;
}
.groupChat {
  height: 40px;
  text-align: center;
  margin: 15px auto;
  width: 350px;
  line-height: 40px;
  color: white;
  border-radius: 50px;
  font-size: 12px;
  background-color: rgba(157, 157, 157, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.foot {
  margin-top: -10px;
  width: 406px;
  background-color: #ffffff;
  border-radius: 15px 15px 0px 0px;
}
.foot_select {
  text-align: center;
  justify-content: space-evenly;
  padding-top: 10px;
  /* padding-bottom: 15px; */
  border-bottom: 1px solid rgb(163, 163, 163, 0.4);
}
.foot_select span {
  /* margin-right: 30px; */
  color: rgb(163, 163, 163);
}
.foot_select span:nth-child(1) {
  color: #000;
  padding-bottom: 5px;
  border-bottom: 3px solid rgb(195, 0, 0);
}
.foot_bottm {
  margin-top: 10px;
  display: flex;
  height: 40px;
  border-bottom: 1px solid rgb(163, 163, 163, 0.4);
}
.foot_bottm p:nth-child(2) {
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foot_bottm p:nth-child(1) {
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.note {
  /* height: ; */
  width: 100%;
  padding-left: 30px;
  box-sizing: border-box;
  height: 80px;
}

.redBook {
  width: 280px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-bottom: -20px;
  box-sizing: border-box;
}

.redBook a {
  width: 85%;
  height: 50px;
  line-height: 60px;
  color: #000;
  margin-left: 20px;
}
.redBook a:nth-child(1) {
  margin-top: 70px;
}
.redBook img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  padding: 15px;
}

.redBook_one {
  margin-top: 20px;
  color: rgb(128, 128, 128);
  display: flex;
  justify-content: space-around;
}
.redBook_one p {
  color: rgb(128, 128, 128);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
}
.redBook_one img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  padding: 10px;
}

.friend {
  border-bottom: 1px solid rgb(128, 128, 128);
}

.goodThing {
  border-bottom: 1px solid rgb(128, 128, 128);
}

.member {
  border-bottom: 1px solid rgb(128, 128, 128);
}

.aaa {
  margin-left: -30px;
  width: 406px;
}
/* 主体内容 */
.subject {
  /* height: 2000px; */
  padding-top: 15px;
  /* padding-right: 7px; */
  /* margin-top: 10px; */
  padding-bottom: 110px;
  overflow: hidden;
  box-sizing: border-box;
  background: #f3f3f3;
}
/* 点赞的主体 */
.subjec {
  /* height: 2000px; */
  padding-top: 15px;
  /* padding-right: 7px; */
  margin-top: 10px;
  padding-bottom: 200px;
  overflow: hidden;
  box-sizing: border-box;
  background: #f3f3f3;
}
/* 主体内容左 */
.subject_left {
  width: 195px;
  float: left;
  overflow: hidden;
  margin-left: 5px;
  box-sizing: border-box;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
}
.sub_1_1 {
  display: flex;
  align-items: center;
  /* margin-top: 5px; */
  margin-left: 10px !important;
}

.sub_1 {
  display: flex;
  justify-content: space-between;
  color: black;
  font-size: 2px;
  /* margin-left: 10px; */
}

.subject_right img {
  width: 192px;
  /* height: 320px; */
  margin-bottom: 4px;
  /* margin-left: 5px !important; */
}
.subject_left img {
  width: 195px;
  /* height: 320px; */
  margin-bottom: 4px;
  margin-left: 0;
}
/* 主体内容右 */
.subject_right {
  width: 198px;
  float: right;
  box-sizing: border-box;
  padding-right: 12px;
  overflow: hidden;
  margin-left: -15px !important;
  border-radius: 5px;
  background: white;
  /* margin-right: 3px; */
}
.sub_1_1 span {
  width: 80px;
  text-align: left;
}
</style>